<template>
  <div class="switch">
    <fx-card title="基础用法">
      <fx-switch v-model="baseSwitch"></fx-switch>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="阻止切换">
      <fx-switch v-model="beforeSwitch" :loading="beforeLoading" :before-change="beforeChange"></fx-switch>
      <template #hide>
        <pre v-highlight="before"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="文字描述">
      <ul class="list">
        <li>
          <span>参数</span>
          <fx-switch v-model="textSwitch" close-text="关闭" open-text="开启"></fx-switch>
        </li>
        <li>
          <span>插槽</span>
          <fx-switch v-model="textSwitch2">
            <template #close>
              <fx-button size="mini">关闭</fx-button>
            </template>
            <template #open>
              <fx-button size="mini">打开</fx-button>
            </template>
          </fx-switch>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="text"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义颜色">
      <fx-switch v-model="colorSwitch" close-color="#f96" open-color="#f69" close-text="左" open-text="右"></fx-switch>
      <template #hide>
        <pre v-highlight="color"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用">
      <fx-switch v-model="disabledSwitch" disabled></fx-switch>
      <fx-switch v-model="disabledSwitch2" disabled></fx-switch>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="内嵌文字">
      <fx-switch v-model="insideSwitch" close-text="关" open-text="开" inside></fx-switch>
      <template #hide>
        <pre v-highlight="inside"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="switchApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FxMessage } from '@/base'

const switchApi = [
  {
    name: 'v-model / modelValue',
    directions: '绑定值',
    type: 'Boolean'
  },
  {
    name: 'closeText',
    directions: '关闭时显示的文字',
    type: 'String'
  },
  {
    name: 'openText',
    directions: '开启时显示的文字',
    type: 'String'
  },
  {
    name: 'closeColor',
    directions: '关闭时的颜色',
    type: 'rgb(219,213,213)'
  },
  {
    name: 'openColor',
    directions: '开启时的颜色',
    type: 'rgb(45, 183, 245)'
  },
  {
    name: 'disabled',
    directions: '禁用',
    type: 'Boolean',
    default: false
  },
  {
    name: 'inside',
    directions: '是否需要内嵌文字',
    type: 'Boolean',
    default: false
  },
  {
    name: 'loading',
    directions: '加载中',
    type: 'Boolean',
    default: false
  },
  {
    name: 'beforeChange',
    directions: '切换前回调',
    type: 'Function',
    default: null
  }
]

const baseSwitch = ref<boolean>(true)
const beforeLoading = ref<boolean>(false)
const beforeSwitch = ref<boolean>(true)
const textSwitch = ref<boolean>(true)
const textSwitch2 = ref<boolean>(true)
const colorSwitch = ref<boolean>(true)
const disabledSwitch = ref<boolean>(true)
const disabledSwitch2 = ref<boolean>(false)
const insideSwitch = ref<boolean>(false)

const beforeChange = (cb: () => void) => {
  const random = Math.random() > 0.5
  beforeLoading.value = true
  setTimeout(() => {
    if (random) cb()
    random ? FxMessage.success('切换成功') : FxMessage.error('切换被阻止了')
    beforeLoading.value = false
  }, 1000)
}

const base = '<fx-switch v-model="baseSwitch"></fx-switch>'
const before = `<fx-switch v-model="beforeSwitch" :before-change="beforeChange"></fx-switch>
export default defineComponent({
  setup() {
    const beforeChange = (cb: () => void) => {
      const random = Math.random() > 0.5
      beforeLoading.value = true
      setTimeout(() => {
        if (random) cb()
        random ? FxMessage.success('切换成功') : FxMessage.error('切换被阻止了')
        beforeLoading.value = false
      }, 1000)
    }
  }
})`
const text = `<ul class="list">
  <li>
    <span>参数</span>
    <fx-switch v-model="textSwitch" close-text="关闭" open-text="开启"></fx-switch>
  </li>
  <li>
    <span>插槽</span>
    <fx-switch v-model="textSwitch2">
      <template #close>
        <fx-button size="mini">关闭</fx-button>
      </template>
      <template #open>
        <fx-button size="mini">打开</fx-button>
      </template>
    </fx-switch>
  </li>
</ul>`
const color = '<fx-switch v-model="colorSwitch" close-color="#f96" open-color="#f69"></fx-switch>'
const disabled = `<fx-switch v-model="disabledSwitch" disabled></fx-switch>
<fx-switch v-model="disabledSwitch2" disabled></fx-switch>`
const inside = '<fx-switch v-model="insideSwitch" close-text="关" open-text="开" inside></fx-switch>'
</script>

<style scoped lang="scss">
.switch {
  .list {
    > li {
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
